import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Statistic } from 'antd';
import { Dispatch, AnyAction } from 'redux';
import _ from 'lodash';
import styles from './environmentStatistics.css';
import { Statistics } from '@/models/connect';
import CommList from './commList';
import { environmentInfoExport } from '@/services/statistics';
import { isMenuVisible } from '@/utils/utils';

const { TabPane } = Tabs;
interface EnvProps {
  statistics?: Statistics;
  loading: boolean;
  dispatch: Dispatch<AnyAction>;
}
class environmentStatistics extends Component<EnvProps> {
  constructor(props: EnvProps) {
    super(props);
    this.state = {
      visible: true,
      drugApi: 'statistics/environmentList',
      detailsUrl: '/statistics/details/environmentDetails', //跳转路径详情页
      expApi: 'statistics/drugListEx', //导出
    };
  }
  componentWillMount() {
    if (localStorage.getItem('isTrue')) {
      this.setState({
        visible: false,
      });
    }
    const { dispatch } = this.props;
    dispatch({
      type: 'statistics/environmentStatistics',
      payload: { deviceTypeNo: this.props.deviceTypeNo },
    });
    localStorage.removeItem('isTrue');
  }
  render() {
    const { statistics = {} } = this.props;
    return this.state.visible && isMenuVisible('iot:environmentInfoLog:statistical') ? (
      <div className={styles['envInfo-container']}>
        <div className={styles['envInfo-top']}>
          <i>环境信息采集概览</i>
        </div>
        <div className={styles['envInfo-bottom']}>
          <div className={styles['envInfo-total']}>
            <p>今日采集</p>
            <p>
              <span>{statistics.dayCount}</span>条
            </p>
          </div>
          <div className={styles['envInfo-total']}>
            <p>近30天采集</p>
            <p>
              <span>{statistics.monthCount}</span>条
            </p>
          </div>
          <div className={styles['envInfo-total']}>
            <p>近7天采集</p>
            <p>
              <span>{statistics.weekCount}</span>条
            </p>
          </div>
          <div className={styles['envInfo-total']}>
            <p>信息总数</p>
            <p>
              <span>{statistics.everyCount}</span>条
            </p>
          </div>
        </div>
        {isMenuVisible('iot:environmentInfoLog:list') && (
          <div className={styles['change-box']} onClick={() => this.setState({ visible: false })}>
            <img src={require('@/assets/images/change.png')} alt="" />
          </div>
        )}
      </div>
    ) : (
      <CommList
        drugApi={this.state.drugApi}
        search={'iot:environmentInfoLog:businessInfo'}
        menuId={'iot:environmentInfoLog:exportList'}
        deviceTypeNo={this.props.deviceTypeNo}
        detailsUrl={this.state.detailsUrl}
        name="环境信息列表.xlsx"
        type={'4'}
        expApi={this.state.expApi}
        commListEx={environmentInfoExport}
      />
    );
  }
}
export default connect(({ loading, statistics }: any) => ({
  loading: loading.effects['statistics/environmentStatistics'],
  statistics: statistics.statistics,
}))(environmentStatistics);
